<template>
    <!-- 显示注册与否的老师表-->
    <div id="TeacherBox">
        <OperaAlert ref="hint" />
        
        <div class="toolbar">
            <div class="but">
                <button @click="importHandle" @mouseover="getExample = true">点击导入
                </button>
                <input type="file" name="upLode" ref="upLoadBut" @change="upLodeFile" id="upLode" style="display: none">
                <button @click="exportHandle">点击导出
                </button>
                <div class="tip" v-show="getExample" @mouseleave="getExample = false">
                    <GetExample type="2" @closeWin="closeWin"></GetExample>
                </div>
            </div>
            <div id="select">
                <li>
                    <div class="selectBox">
                        <select ref="isPass" name="" id="" v-model="val" @change="updateSubOptions">
                            <option selected value="-1">全部</option>
                            <option value="1">已审核</option>
                            <option value="0">未审核</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="selectBox">
                        <select name="" ref="isVerify" id="" v-model="val" @change="updateSubOptions">
                            <option selected value="-1">全部</option>
                            <option value="1">已通过</option>
                            <option value="0">未通过</option>
                        </select>
                    </div>
                </li>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索老师/课题/团队" @keyup="searchEvent1">
                <img src="../assets/images/teacher/myCourse/search.svg" alt="搜索">
            </div>
        </div>
        <table class="table">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <th>序号/目录</th>
                    <th>申报人</th>
                    <th>课题方向</th>
                    <th>课题概述</th>
                    <th>联系方式</th>
                    <th>附件</th>
                    <th>状态</th>
                    <th>选择是否通过</th>
                </tr>
                <tr v-for="(item, index) in tData" align="center">
                    <td>{{  (pageData.pageData.current-1)*pageData.pageData.pageSize+ index + 1}}</td>
                    <td>{{ item.teachers[0].name }}</td>
                    <td>{{ item.courseType }}</td>
                    <td>{{ item.courseIntroduction }}</td>
                    <td>{{ item.teachers[0].number }}</td>
                    <td><span @click.stop="getFile(1)" class="getFile">获得附件</span></td>
                    <td>{{ item.isPass ? '已审核' : '未审核' }}</td>
                    <td class="pass">
                        <div v-show="item.isPass" @click="auditCourse(item.courseId,1)">通过</div>
                        <div v-show="item.isPass" @click="auditCourse(item.courseId,-1)">不通过</div>
                    </td>
                </tr>
            </table>
        </table>

    </div>

    <div class="pagination">
        <Pagination ref="pageData" @changePage="changePage" />
    </div>
</template>
<script setup>
import { getUserData, exportTable } from '../utils';
import { getCurrentInstance, ref } from 'vue';
import Pagination from './Pagination.vue';
import GetExample from './GetExample.vue'
import Select from './Select.vue';
import OperaAlert from './OperaAlert.vue';

const http = getCurrentInstance()?.appContext.config.globalProperties.$http

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}
const pageData = ref()

// 获得筛选选项
let isPass = ref()
let isVerify = ref()

//放到表格的数据
const tData = ref()

const changePage = function (pd) {

    // 加上筛选信息
    let filter = ''
    if(isPass.value.value != -1){
        filter += '&isPass='+isPass.value.value
    }
    if(isVerify.value.value != -1){
        filter += '&isVerify='+isVerify.value.value
    }

    //得到课程信息
    fetch(http + '/admin/major/course?' + 'current=' + pd.current + '&pageSize=' + pd.pageSize + filter, {
        method: 'get',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        console.log(data);
        data = data.data
        //生成分页
        pageData.value.changePage(data)
        tData.value = data.records

        if (tData.value.length > 0) {
            let params = {
                school: tData.value[0].school
            }
            col.value.getFilterOptions(params)
        }
    }).catch((err) => {
        console.log(err);
    })
}


// 导入表格
const getExample = ref(false)
// 关闭示例表提醒弹窗
const closeWin = function () {
    getExample.value = false
}


const upLodeFile = function (event) {
    // let fd = new FormData()
    // fd.append('file', event.target.files[0])

    // fetch(http + '/admin/subAdmin/excel', {
    //     method: 'post',
    //     headers: {
    //         "Token": userData.Token,
    //     },
    //     body: fd,
    //     responseType: 'json',
    // }).then((response) => {
    //     return response.json()
    // }).then((data) => {
    //     console.log(data);
    //     if (data.code == 200) {
    //         succHandle()
    //         history.go(0)
    //     } else {
    //         errHandle()
    //     }
    // }).catch((err) => {
    //     console.log(err);
    //     errHandle()
    // })
}

const upLoadBut = ref()
const importHandle = function () {
    upLoadBut.value.click()
}

// 导出表格
const exportHandle = function () {
    // exportTable(2)
}


const dialogVisible = ref(false)

const info = ref()

const close = function () {
    dialogVisible.value = false
}

// 修改成功失败的提醒
const hint = ref()
const errHandle = function () {
    hint.value.errHandle()
}

const succHandle = function () {
    hint.value.succHandle()
}

// 获得附件
const getFile = function (e, cid) {
    fetch(http + '/admin/major/courses/appendix?cid=' + cid, {
        method: 'post',
        headers: {
            "Token": userData.Token,
        },
        responseType: 'blob',
    }).then((response) => {
        return response.blob()
    }).then((data) => {
        console.log(data);
        if (data.code == 200) {
            console.log(data);
            // 创建一个 a 标签，并隐藏 a 标签
            let a = document.createElement("a");
            a.style.display = "none";
            // 对象 URL 绑定到 a 标签上
            a.href = window.URL.createObjectURL(new Blob([data]));
            // 给 a 标签添加 download 属性 与 文件名
            a.setAttribute("download", `课程附件${new Date().toLocaleString()}.xls`);
            // 把 a 标签挂载到 dom 树上并执行 a 标签的 click 事件
            document.body.appendChild(a);
            a.click();
            // 释放我们创建的 url 和 a 标签
            window.URL.revokeObjectURL(a.href);
            document.body.removeChild(a);
        } else {
            hint.value.errHandle('课程附件不存在')
        }
    }).catch((err) => {
        console.log(err);
        errHandle()
    })
}

// 通过课程
const auditCourse = function(cid, status){
    fetch(http + '/admin/major/courses/' + cid +'?status=' + status, {
        method: 'post',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'

        },
        responseType: 'json',
    }).then((response) => {
        return response.blob()
    }).then((data) => {
        console.log(data);
        if (data.code == 200) {
           hint.value.succHandle()
        } else {
            hint.value.errHandle(data.msg)
        }
    }).catch((err) => {
        console.log(err);
        errHandle()
    })
}
</script>
<style scoped>
.table {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #bfbfbf;
}

.table table {
    width: 100%;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #707070;
}

.table th {
    border: solid 1px #bfbfbf;
    background-color: #e4e7ed;
    height: 53px;
}

.table td {
    border: solid 1px #bfbfbf;
    height: 53px;
    background-color: white;
}

.tip {
    position: absolute;
    top: 115%;
    z-index: 10;
    left: -10%;
}

.toolbar {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.but {
    width: 30%;
    display: flex;
    justify-content: space-between;
    margin-right: 2%;
}

.but button {
    width: 45%;
    height: 44px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    border: 0px;
    color: #fafafa;
    font-size: 1.1em;
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;
    cursor: pointer;
    ;
}

.search {
    width: 40%;
    height: 44px;
}

.search input {
    width: 100%;
    height: 100%;
    border: 0px;
    padding-left: 4%;
    background-color: #fcfcfd;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    letter-spacing: 0px;
    color: #707070;
    outline: none;
    padding-right: 11%;
}

.search img {
    position: absolute;
    right: 1%;
    height: 100%;
    scale: 0.6;
    cursor: pointer;
}

#select {
    padding-right: 1.3%;
    display: flex;
    width: 32%;
    height: 100%;
    justify-content: space-between;
}

#select li {
    width: 46%;
    list-style: none;
    height: 44px;
}
.selectBox select {
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    width: 100%;
    height: 44px;
    outline: none;
    border: 0px;
    color: #707070;
    padding-left: 13%;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    overflow: hidden;
    overflow: hidden;
    /* 第二步：让文本不会换行， 在同一行继续 */
    white-space: nowrap;
    /* 第三步：用省略号来代表未显示完的文本 */
    text-overflow: ellipsis;
    padding-right: 20%;
}

.selectBox select::-ms-expand {
    display: none;
}
.selectBox select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../assets/images/administrator/arrow-down-bold.svg) no-repeat 95% center;
    background-color: #fff;
    background-size: 10%;
}
.getFile {
    cursor: pointer;
}

.getFile:hover {
    border-bottom: 1px solid #707070;
    opacity: 0.5;
    
}
.pass{
    display: flex;
    justify-content: space-between;
    padding-left: 15%;
    padding-right: 15%;
    align-items: center;
}
.pass div{
    color: #707070;
    border-bottom: 1px solid #707070;
    height: 70%;
    cursor: pointer;
}
.pass div:hover{
    opacity: 0.6;
    font-family: Source Han Sans CN;
}
</style>